<template>
  <div>
    <Card hoverable>
      <div>
        <Divider v-if="title === '租户占比表'" class="!md:my-7" orientation="left"
          ><span style="margin-right: 8px; font-weight: bolder">{{ title }}</span></Divider
        >
        <span v-else style="margin-right: 8px; font-weight: bolder">{{ title }}</span>
      </div>
      <div
        v-if="title === '调用情况'"
        :id="title"
        class="md:h-4/5 !md:w-full enter-x"
        style="width: 700%; height: 400%"
      ></div>
      <div v-else>
        <div
          v-if="title !== '租户占比表'"
          :id="title"
          class="md:h-4/5 !md:w-full enter-x"
          style="width: 650%; height: 300%"
        ></div>
        <div v-else :id="title" class="md:h-4/5 !md:w-full enter-x" style="width: 600%; height: 600%"></div>
      </div>
    </Card>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts';
import { Card, Divider } from 'ant-design-vue';

import { onMounted } from 'vue';

const props = defineProps({
  title: String,
  x: Array,
  series: Array,
  name: Array,
});
let seriesObj = [];
let option = {};

function caseOfInvocationObj() {
  seriesObj.push({
    data: props.series,
    type: 'line',
    label: {
      show: true,
    },
    smooth: true,
  });
}

function caseOfInterfaceObj(res: any) {
  seriesObj.push({
    data: res,
    stack: 'total',
    type: 'bar',
    label: {
      show: true,
    },
    emphasis: {
      focus: 'series',
    },
    smooth: true,
  });
}

function caseOfTenantObj(res: any) {
  seriesObj.push({
    data: res,

    type: 'line',
    label: {
      show: true,
    },
    emphasis: {
      focus: 'series',
    },
    smooth: true,
  });
}

function pushSeriesObj() {
  if (props.title === '调用情况') {
    caseOfInvocationObj();
  } else {
    props.series?.forEach((res) => {
      if (props.title === '接口调用图表') {
        caseOfInterfaceObj(res);
      } else if (props.title === '租户趋势表') {
        caseOfTenantObj(res);
      } else {
        let value = 0;
        res.forEach((item) => {
          value += item;
        });
        seriesObj.push({
          value: value,
        });
      }
    });
    for (let i = 0; i < props.name.length; i++) {
      seriesObj[i].name = props.name[i];
    }
  }
}

function caseOfInvocationOption() {
  option = {
    xAxis: {
      type: 'category',
      data: props.x,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: props.series,
        type: 'line',
        smooth: true,
      },
    ],
  };
}

function caseOfInterfaceOption() {
  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
      },
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    yAxis: {
      type: 'category',
      data: props.x,
    },
    xAxis: {
      type: 'value',
    },
    series: seriesObj,
  };
}

function caseOfTenantOption() {
  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
      },
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: props.x,
    },
    yAxis: {
      type: 'value',
    },
    series: seriesObj,
  };
}

function caseOfOtherOption() {
  option = {
    tooltip: {
      trigger: 'item',
    },
    legend: {
      top: '5%',
      left: 'center',
    },
    series: [
      {
        name: props.title,
        type: 'pie',
        radius: ['40%', '70%'],

        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
        },
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '40',
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data: seriesObj,
      },
    ],
  };
}

onMounted(() => {
  pushSeriesObj();
  let chartDom = document.getElementById(props.title);
  let myChart = echarts.init(chartDom);

  if (props.title === '调用情况') {
    caseOfInvocationOption();
  } else if (props.title === '接口调用图表') {
    caseOfInterfaceOption();
  } else if (props.title === '租户趋势表') {
    caseOfTenantOption();
  } else {
    caseOfOtherOption();
  }
  option && myChart.setOption(option);
});
</script>
